<template>
  <div :style="{'--size':size}" class="round-menu">
    <div :class="['round-menu-box' ,'flex-col-center',computedMode]">
      <div class="btn flex-row-center">
        <i :class="icon"></i>
      </div>
      <div v-for="(item,index) in menuList"
           :style="{'--i':index}"
           class="child-btn flex-row-center"
           @click="handleClick(item,index)"
           @mouseenter="showContent=index" @mouseleave="showContent=-1">

        <i v-show="!(showContent===index)" :class="item.icon"></i>
        <span v-show="showContent===index">{{ item.content }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RoundMenu",
  props: {
    size: {
      type: String,
      default: '200px'
    },
    menuList: {
      type: Array,
      default: []
    },
    icon: {
      type: String
    },
    mode: {
      type: String,
      default: "light"
    }
  },
  data() {
    return {
      showContent: -1
    }
  },
  methods: {
    handleClick(item, index) {
      this.$emit("click", {
        ...item,
        index
      })
    }
  },
  computed: {
    computedMode() {
      return this.mode
    }
  }
}
</script>

<style lang="less" scoped>
@Size: 200px;
.round-menu {

  .round-menu-box {
    width: @Size;
    height: @Size;
    position: relative;

    .btn {
      width: @Size*0.25;
      height: @Size*0.25;
      font-size: 20px;
      z-index: 9999;
      cursor: pointer;
      caret-color: transparent;
      border-radius: 50%;
      left: 0;
    }

    .child-btn {
      position: absolute;
      width: @Size*0.2;
      height: @Size*0.2;
      left: 0;
      transform-origin: 0.5*@Size;
      transition-delay: calc(.2s * var(--i));
      transform: rotate(0deg) translateX(@Size*0.4);
      transition: 0.5s;
      cursor: pointer;
      caret-color: transparent;
      border-radius: 50%;

      i {
        transform: rotate(calc(var(--i) * 360deg / -9));
      }

      &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .2);
      }

      span {
        font-size: 14px;
        transform: rotate(calc(var(--i) * 360deg / -9));
        overflow: hidden;
      }

    }

    &:hover {
      .child-btn {
        transform: rotate(calc(var(--i) * 360deg / 9));

      }
    }
  }

  .light {
    .btn {
      background-color: whitesmoke;
    }

    .child-btn {
      background-color: whitesmoke;
    }
  }

  .dark {
    .btn {
      color: whitesmoke;
      background-color: black;
    }

    .child-btn {
      color: whitesmoke;
      background-color: black;
    }
  }
}
</style>